<template>
  <div style="background-color: #ffefcf; padding: 10px">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>食堂简介</el-breadcrumb-item>
    </el-breadcrumb>

    <div>
      <el-divider></el-divider><span style="color: #E6A23C;font-size: 36px">我院食堂简介</span>
      <div style="text-align: right">时间:2023/2/20 20:37</div>
      <el-divider></el-divider>
    </div>

    <p style="line-height: 25px;text-indent: 2em;font-size: 16px">
      "老来福"食堂是我院独立经营的老人专用食堂,位于主楼 "有依楼" 一楼,提供早中晚三餐, 采用护工协助方式就餐，
      对于有特殊需求的老人也可进行加餐/套餐定制。
      食堂用餐统一配置消毒餐具。食堂内部布局合理，设施完善，功能齐全。
      老人就餐条件优越，餐厅宽敞明亮，干净整洁，环境优雅。
    </p>



    <div style="margin:20px auto;align-items: center;text-align: center">
      <img style="border-radius: 5%;"  src="../../../assets/equipment/food01.png" width="500"/>
      <div style="margin-top: 10px; ;font-size: 13px">  <b>"老来福食堂"</b></div>
    </div>


    <div>
      <el-divider></el-divider><span style="color: #E6A23C;font-size: 36px">我院食堂菜单</span>
      <div style="text-align: right">时间:2023/2/20 20:37</div>
      <p style="line-height: 25px;font-size: 14px;font-style: italic;color: #E6A23C">
        "老来福"食堂菜品由中央厨房供给,餐单内容实时更新,餐品种类月更新,保障老人朋友随时享用营养丰富,
        安全健康的用餐体验.
      </p>
      <el-divider></el-divider>
    </div>

<!--    菜单页-->
    <el-row gutter="15" style="text-align: center">
      <el-col span="8" v-for="item in foodArr">
        <div style="width: 230px; text-align: center; margin-bottom: 30px">
          <img style="border-radius: 50%;margin: 0 auto;border-color: #E6A23C;border-style: solid;border-width: 3px" :src="require('../../../assets/food/'+item.url)" width="150" height="150"/>
          <p style="font-size: 15px;font-weight: bold;color: #E6A23C">{{item.name}}</p>
        </div>
      </el-col>
    </el-row>






  </div>
</template>

<script>
export default {
  data() {
    return{
      foodArr:[],
    };
  },
  methods:{
    loadFoodArr(){
      let url = 'http://localhost:8080/foods/list';console.log('url = ' + url);
      this.axios.get(url).then((response) => {let responseBody = response.data;console.log(responseBody);
        if (responseBody.state == 20000) {
          this.foodArr = responseBody.data;
          console.log(this.foodArr);}});
    },


  },
  mounted() {
    this.loadFoodArr();

  }


}
</script>

<style scoped>

</style>